<template>
  <div class="broken-lines">
    <div
      class="charts_line"
      :style="{ height: '240px', width: '1200px' }"
      ref="Broken_line"
    ></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      interval: 0,
      interval1: 0,
      times: 0,
    };
  },
  destroyed() {
    if (this.times) {
      clearInterval(this.times);
    }
    if (this.interval) {
      clearInterval(this.interval);
    }
    if (this.interval1) {
      clearInterval(this.interval1);
    }
  },
  mounted() {
    this.getData();
  },
  methods: {
    Max(value) {
      let maxStr = +`${parseInt(Math.abs(value.max))}`[0] + 1;
      let minStr = +`${parseInt(Math.abs(value.min))}`[0] + 1;
      for (let i = 0; i < `${Math.ceil(Math.abs(value.max))}`.length - 1; i++) {
        maxStr += "0";
      }
      for (let i = 0; i < `${Math.ceil(Math.abs(value.min))}`.length - 1; i++) {
        minStr += "0";
      }
      return Math.abs(value.max) > Math.abs(value.min) ? +maxStr : +minStr;
    },
    Min(value) {
      let maxStr = +`${parseInt(Math.abs(value.max))}`[0] + 1;
      let minStr = +`${parseInt(Math.abs(value.min))}`[0] + 1;
      for (let i = 0; i < `${Math.ceil(Math.abs(value.max))}`.length - 1; i++) {
        maxStr += "0";
      }
      for (let i = 0; i < `${Math.ceil(Math.abs(value.min))}`.length - 1; i++) {
        minStr += "0";
      }
      return value.min >= 0
        ? 0
        : Math.abs(value.max) > Math.abs(value.min)
        ? -+maxStr
        : -+minStr;
    },
    getData() {
      var myChartDom = this.$refs.Broken_line;
      var myChart = this.$echarts.init(myChartDom);

      let hours = [
        "00:00",
        "01:00",
        "02:00",
        "03:00",
        "04:00",
        "05:00",
        "06:00",
        "07:00",
        "08:00",
        "09:00",
        "10:00",
        "11:00",
        "12:00",
        "13:00",
      ];
      let aaa = [
        13022890,
        13032890,
        13042890,
        13052890,
        13062890,
        13072890,
        13022890,
        13082890,
        14022890,
      ];
      let bbb = [0, 0, 0, 0, 0, 0, 0, 47273, 0, 0, 0];
      let ccc = [0, 0, 0, 0, 0, 0, 0, 4728, 395, 0, 0, 16735, 2043, 1533];
      let maxC = Math.max(...aaa);
      let minC = Math.min(...aaa);
      if (minC > 1000) {
        minC = minC - 100;
      } else if (minC >= 1000 && minC < 10000) {
        minC = minC - 1000;
      } else if (minC >= 10000 && minC < 100000) {
        minC = minC - 2000;
      } else if (minC >= 100000) {
        minC = minC - 10000;
      }

      let option = {
        backgroundColor: "rgba(43, 51, 59,1) ",
        tooltip: {
          trigger: "axis",
        },
        legend: {
          icon: "pin",
          itemWidth: 14,
          itemHeight: 5,
          itemGap: 13,
          data: ["在库件数", "销售出库件数", "采购入库件数"],
          bottom: "1%",
          left: "35%",
          textStyle: {
            fontSize: 12,
            color: "#F1F1F3",
          },
        },
        xAxis: [
          {
            boundaryGap: true,
            splitNumber: 24,
            axisLine: {
              lineStyle: {
                color: "#006AD6",
              },
            },
            splitLine: {
              //去除网格线
              show: false,
            },
            splitArea: { show: false }, //去除网格区域
            // data:this.opHour
            data: hours,
          },
        ],
        yAxis: [
          {
            type: "value",
            position: "right",
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false, // 隐藏y轴线
              lineStyle: {
                color: "#006AD6",
              },
            },
            axisLabel: {
              margin: 10,
              textStyle: {
                fontSize: 14,
              },
              formatter: function (value) {
                //设置Y轴标题过长
                if (value < 10000) {
                  return value + "";
                } else if (value >= 10000 && value < 1000000) {
                  return (value / 10000).toFixed(4) + "万";
                } else if (value >= 1000000 && value < 10000000) {
                  return (value / 1000000).toFixed(4) + "百万";
                } else if (value >= 10000000 && value < 100000000) {
                  return (value / 10000000).toFixed(4) + "千万";
                } else if (value >= 100000000) {
                  return (value / 100000000).toFixed(4) + "亿";
                }
              },
            },
            splitArea: { show: false }, //去除网格区域
            splitLine: {
              show: false,
            },
            // 计算左侧y轴对应的柱状图数据的最大值
            max: maxC,
            min: minC,
            // max: value => this.Max(value),
            // min: value => this.Min(value)
          },
          {
            type: "value",

            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              show: true,
              color: "#006AD6",
              formatter: "{value}",
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: "#006AD6",
              },
            },
            // 右侧y轴百分比对应折线图的最大最小值
            max: (value) => this.Max(value),
            // min: value => this.Min(value)
          },
        ],
        series: [
          {
            name: "在库件数",
            type: "line",
            // data: this.stockNum,
            data: aaa,
            barWidth: "30%",
            barMaxWidth: 20,
            itemStyle: {
              normal: {
                color: "rgb(0,201,255)",
                borderColor: "rgba(0,201,255,0.27)",
                borderWidth: 10,
              },
            },
          },
          {
            name: "销售出库件数",
            type: "line",
            // data: this.outGoodsQtys,
            data: bbb,
            smooth: false, //是否平滑曲线显示
            showSymbol: false, // false 表示只有在tooltip hover的时候显示
            symbolSize: 1,
            yAxisIndex: 1,
            lineStyle: {
              // color: '#fe9a8b',
              width: 1,
            }, //折线颜色粗细
            itemStyle: {
              normal: {
                color: "rgb(182,100,255)",
                borderColor: "rgba(182,100,255,0.2)",
                borderWidth: 10,
              },
            },
          },
          {
            name: "采购入库件数",
            type: "line",
            // data: this.inStoreGoodsQtys,
            data: ccc,
            smooth: false, //是否平滑曲线显示
            showSymbol: false, // false 表示只有在tooltip hover的时候显示
            symbolSize: 1,
            yAxisIndex: 1,
            lineStyle: {
              // color: '#fe9a8b',
              width: 2,
            }, //折线颜色粗细
            itemStyle: {
              normal: {
                color: "rgb(65,136,255)",
                borderColor: "rgba(65,136,255,0.2)",
                borderWidth: 10,
              },
            },
          },
        ],
      };

      var currentIndex = -1;
      clearInterval(this.times);
      this.times = setInterval(function () {
        var dataLen = option.series[0].data.length;

        // 取消之前高亮的图形
        myChart.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: currentIndex,
        });
        currentIndex = (currentIndex + 1) % dataLen;
        // 高亮当前图形
        myChart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: currentIndex,
        });
        // 显示 tooltip
        myChart.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: currentIndex,
        });
      }, 3000);
      myChart.clear();
      myChart.setOption(option, true);
    },
  },
};
</script>

<style lang="scss" scoped>
.broken-lines {
  width: 1200px;
  margin: 0 auto;
}
</style>